<template>
  <div>
    <Hedar></Hedar>
    <!--<div class="logoImg">-->
      <!--<p class="lOgin_search">-->
        <!--<input type="text" v-model="butsata" name=""  value="" />-->
        <!--<router-link :to="{path:'/Search',query: { name:butsata}}">-->
          <!--<span>搜索</span>-->
        <!--</router-link>-->
      <!--</p>-->
    <!--</div>-->
    <div class="headers">
      <div class="headerLeft">
        <router-link :to="{path:'/Details',query: { id:adexid}}" ><img v-bind:src = bannerimg alt="/"></router-link>
        <span>{{business}}</span>
      </div>
      <!--<div class="headerRight">
                <div>
                    <input type="text" class="phone" v-model="Verification" placeholder=""  ref="Verification"></input><router-link :to="{path:'/Search',query: { name:Verification}}"><button class="phones"></button></router-link>

                </div>
            </div>-->
    </div>
    <p class="HOMEnav">
      <router-link :to="{path:'/Details',query: { id:adexid}}" ><span>首页</span></router-link>
      <router-link :to="{path:'/Storeinfo',query: { id:adexid}}" ><span>联系我们</span></router-link>
    </p>
    <div class="Middle">
      <div class="MiddleL">
        <div class="MiddleLL">
          <!--<div class="swiper-container gallery-top swiper-container-horizontal">
                        <div class="swiper-wrapper">
                           <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="width: 100%; margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div>

                        </div>

                    </div>
                    <div class="swiper-container gallery-thumbs swiper-container-horizontal">
                        <div class="swiper-wrapper">
                            <div v-for="value in lbt" class="swiper-slide swiper-slide-next" style="margin-right: 10px;" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></div>
                        </div>
                    </div>
                    <div class="Collection">
                        <span @click="collection()" class="classspan" :class="classA ? 'class-a' : 'class-b' " >收藏</span>-->



          <!--<el-popover
                        ref="popover5"
                        placement="top"
                        width="160"
                        v-model="visible2">

                        <div style="text-align: right" class="delbut">
                          <el-button size="mini" type="text" @click="visible2 = false">×</el-button>

                        </div>
                         <p class="share" v-for="hot in hots"><router-link to="/">分享到:{{hot.word}}</router-link></p>
                      </el-popover>

                      <el-button v-popover:popover5 class="class-a2">分享</el-button>-->



          <!--</div>-->
          <div class="BigDetail ">
            <p class="BigP" v-bind:style="{backgroundImage: 'url(' + Bigimgs + ')'}"></p>
            <ul class="BigUl">
              <li :class="{'ul-a1':value.ulA,'ul-b1':!value.ulA} " v-for="(value,$index) in lbt" @click="Switch(value, $index)" v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"></li>
            </ul>

          </div>
          <div class="Collection">
            <span @click="collection()" class="classspan" :class="classA ? 'class-a' : 'class-b' " >收藏</span>
          </div>
        </div>
        <div class="MiddleLR" >
          <p class="MLRtop">{{gdName}}</p>
          <div  class="MLRmid">
            <div>价格<span>¥{{gdPrice}}</span></div>
            <!--<p>价格<span>¥{{details.price}}</span></p>
                        <p>月销量<span>{{details.price}}</span>累积评价<span>{{details.price}}</span></p>-->
          </div>
          <div class="freight">
            <p>产地</p>
            <span>{{abcdef[gdPlace-1] ? abcdef[gdPlace-1].label : '无'}}</span>
          </div>

          <!--<div class="freight">
                        <p>运费</p>
                        <select v-model="selected">
                          <option v-for="option in options" v-bind:value="option.value">
                            {{ option.text }}
                          </option>
                        </select>
                        至
                        <select v-model="selected2">
                          <option v-for="option in options2" v-bind:value="option.value">
                            {{ option.text }}
                          </option>
                        </select>
                    </div>-->
          <div class="size">
            规格<span>{{gdOrder}}</span>
          </div>
          <div class="colordiff">
            <p>颜色分类</p>
            <span>{{gdColour}}</span>
            <!--<ul>

                            <li v-for="(value,$index) in lbt" @click="Selected(value, $index)" :class="{'ul-a1':value.ulA,'ul-b1':!value.ulA} ">

                                <img v-bind:src = value.imgs alt="/">

                            </li>
                        </ul>-->
          </div>
          <div class="number">
            <p>数量</p>
            <div class="number2">
              <input type="number" min="0" v-model="gdNumber" placeholder="" v-on:input="Stock()" />
              <div class="adddel">
                <h4 @click="add1()">＋</h4>
                <h4 @click="del1()">－</h4>
              </div>
            </div>

          </div>
          <div class="buttons">
            <!--<button class="nowshop">加入购物车</button>-->
            <router-link :to="{path:'/Storeinfo',query: { id:adexid}}"><button class="nowshop">加入购物车</button></router-link>
          </div>
        </div>
      </div>
      <div class="MiddleR">
        <div class="shopbottom">
          <h4><span>看了又看</span></h4>
          <ul>
            <li v-for="hot in hots"  @click="collection3()">
              <router-link :to="{path:'/Shopdetails',query: { id:hot.gdId}}">
                <div>
                  <img v-bind:src = myfilter(hot.gdImg) alt="/">
                  <!--<img v-bind:src = hot.gdImg alt="/">-->
                  <p class="hots1">¥{{hot.gdPrice}}</p>
                  <p class="hots2"></p>
                </div>

              </router-link>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <div class="content">
      <div class="contentL">
        <div class="shoptop">
          <h4>{{shopname}}</h4>
          <div class="imgO"><img v-bind:src = bannerimg alt="/"></div>
          <div class="buttonO">
            <p>联系人：{{iname}}</p>
            <p>手机号：{{iphone}}</p>
            <p>QQ(微信、邮箱)：{{iemail}}</p>
            <p><button><router-link :to="{path:'/Details',query: { id:adexid}}" >进店逛逛</router-link></button><button @click="collection2()" :class="classB ? 'classS1' : 'classS2' " >收藏店铺</button></p>
          </div>
        </div>

      </div>
      <div class="contentR">
        <ul>
          <li @click="handleClick1()" class="one action">商品详情</li>
          <!--<li @click="handleClick2()" class="two">累积评价</li>-->
        </ul>
        <div class="container">
          <div class="con1">
            <!--<div class="commonTop">
                         <p>品牌名称：<router-link to="/">{{brand}}</router-link><button @click="follow()" :class="followA ? 'follow1' : 'follow2' ">关注</button></p>
                            <span>产品参数：{{parameter}}</span>
                            <span>产地：{{parameter}}</span>
                            <span>类别：{{parameter}}</span>
                            <span>商品型号：{{parameter}}</span>
                            <span>质地：{{parameter}} </span>
                            <span>尺寸：{{parameter}}</span>
                            <span>品牌：{{parameter}}</span>
                        </div>-->
            <div class="commonBot">
              <img v-for="value in lbt2" v-bind:src = value.imgs alt="/">
            </div>
          </div>
          <div class="con2">暂无评价</div>

        </div>
      </div>
    </div>
    <Footers></Footers>
  </div>
</template>

<script>
  import options3 from '../../static/inputOptions2'
  import Footers from'@/components/Footers'
  import Hedar from'@/components/Hedar'

  import Swiper from '../../static/swiper-3.4.2.jquery.min.js'

  let galleryTop
  let galleryThumbs
  export default{
    data(){
      return{
        abcdef:options3,
        Bigimgs:require('@/assets/loge.png'),
        amount:'',
        iphone:18510838929,
        iname:"全甲鑫",
        iemail:"84003478@qq.com",
        shopId:'',
        adexid:"",
        visible2:false,
        ok:true,
        activeName2: 'first',
        business: '雷士照明',
        bannerimg: require('@/assets/loge.png'),
        Verification:'',
        classA:false,
        classB:false,
        brand:"马可波罗",
        parameter:"马可波罗",
        ulA:true,
        lbt2:[],
        gdColour:'ww',
        hots:[
          {gdImg:require('@/assets/bg1.png'),gdName:"dd"},
          {gdImg:require('@/assets/loge.png'),gdName:"dd"},
          {gdImg:require('@/assets/loge.png'),gdName:"dd"},

        ],
        gdName:'',
        gdPrice:'s',
        gdPlace:'',
        gdOrder:'',
        gdNumber:'',
        gdNumbers:'',
        shopname:'马可波罗旗舰店',
        followA:true,
        lbt: [
          {imgs:require('@/assets/bg1.png')},
          {imgs:require('@/assets/loge.png')},
          {imgs:require('@/assets/loge.png')},
          {imgs:require('@/assets/loge.png')},
          {imgs:require('@/assets/loge.png')},
          {imgs:require('@/assets/loge.png')},
        ],
        selected: 'A',
        // options: [
        //    { text: '北京黑龙江', value: 'A' },
        //    { text: '上海', value: 'B' },
        //    { text: '深圳', value: 'C' }
        //   ],
        selected2: 'B',
        //   options2: [
        //     { text: '北京', value: 'A' },
        //     { text: '上海', value: 'B' },
        //     { text: '深圳', value: 'C' }
        //   ],
        butsata:'',

      }
    },
    components:{
      Footers,
      Hedar,


    },
    mounted () {
      console.log( this.abcdef[0].label)

      // this.lunbo()
      //  this.lunbo2()
      //this.shopId = this.getQueryString('id')
      this.shopId = this.$route.query.id
//			this.shopId = 4
      this.menu()
      this.$http({
        method:'GET',
        url:"http://www.wutongsd.com/awm/goodsDetail.do?gdId="+ this.shopId ,
        emulateJSON: true
      }).then(function(data){
        console.log(data.body.goods.gdName)
        this.gdName=data.body.goods.gdName
        this.gdPrice=data.body.goods.gdPrice
        this.gdPlace=data.body.goods.gdPlace
        this.gdOrder=data.body.goods.gdOrder
        this.gdNumbers=data.body.goods.gdNumber
        this.gdColour=data.body.goods.gdColour
        var array = data.body.goods.gdImg.split(";");
        var i = 0,
          len = array.length-1,
          arr = [];
        for(;i<len;i++){
          arr.push({"imgs":'http://wut1.oss-cn-beijing.aliyuncs.com/'+ array[i]});
        }
        this.lbt= arr
        this.Bigimgs= arr[0].imgs

        var array2 = data.body.goods.gdDeimg.split(";");
        var j = 0,
          len2 = array2.length-1,
          arr2 = [];
        for(;j<len2;j++){
          arr2.push({"imgs":'http://wut1.oss-cn-beijing.aliyuncs.com/'+ array2[j]});
        }
        this.lbt2= arr2

        this.shopname=data.body.shop.adShopName
        this.bannerimg='http://wut3.oss-cn-beijing.aliyuncs.com/'+ data.body.shop.adShopLogo
        this.iname=data.body.shop.adShopUsername
        this.iphone=data.body.shop.adShopPhone.substr(0, 3) + '****' +data.body.shop.adShopPhone.substr(7);
        this.iemail=data.body.shop.adShopQq
        this.adexid=data.body.shop.adExId
        this.business=data.body.shop.adShopName
        this.hots=data.body.list


      },function(error){


      })

    },
    methods: {
      menu() {
        window.scrollTo(0,0);
      },
      myfilter(value){
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/'+ value.split(';')[0]

      },
      // getQueryString(name){
      //  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      //  var r = window.location.href.split('?')[1].match(reg);
      //  if (r != null){
      //   return decodeURI(r[2]);
      //  }
      //  return null;
      //},
      collection3:function(){
        window.location.reload()
      },
      search:function(){
        console.log(this.lbt.length)
      },
      Stock:function(){
        console.log(this.gdNumber)
        if(this.gdNumber>this.gdNumbers){
          this.gdNumber = this.gdNumbers
          this.$message('不能大于库存');
        }
      },
      //lunbo:function() {
      //   galleryTop = new Swiper('.gallery-top', {

      //     spaceBetween: 10,
      //      grabCursor: true,
      //     initialSlide: 0.3,
      //     observer:true,
      //     observeParents:true,
      //      autoplayDisableOnInteraction: true
      //    })
      //    galleryThumbs = new Swiper('.gallery-thumbs', {
      //      spaceBetween: 10,

      //      initialSlide: 0.3,
      //     centeredSlides: true,
      //      pagination: '.swiper-pagination',
      //      slidesPerView: 4,
      //      touchRatio: 0.2,
      //     slideToClickedSlide: true,
      //     autoplayDisableOnInteraction: false,
      //     grabCursor: true,
      //     observer:true,
      //    observeParents:true,
      //  })
      //  galleryTop.params.control = galleryThumbs
      //  galleryThumbs.params.control = galleryTop
      // },
      // lunbo2:function(){
      //    var mySwiper = new Swiper ('.swiper-container2', {
      //    direction: 'vertical',
      //    loop: false,
      //    pagination: '.swiper-pagination',
      //    slidesPerView: 3,

      //    spaceBetween: 20,

      //    nextButton: '.swiper-button-next',
      //    prevButton: '.swiper-button-prev',

      //  })
      //  },
      handleClick1:function() {
        $(".one").addClass("action")
        $(".two").removeClass('action');
        $(".con1").css('display',"block");
        $(".con2").css('display',"none");
      },
      handleClick2:function() {
        $(".one").removeClass('action');
        $(".two").addClass("action")
        $(".con2").css('display',"block");
        $(".con1").css('display',"none");
      },
      collection:function(){
        if(sessionStorage.getItem('login')){
          this.classA= !this.classA
          var that = this
          var userId = sessionStorage.getItem("userId")
          var gdId = this.shopId
          if(this.classA){
            $.ajax({

              method:'POST',
              url: "http://www.wutongsd.com/awm/insertFavourite.do",
              async: true,
              data:{'gdId':gdId,'userId':userId},
              datatype: "json",
              withCredentials: true,
              contentType: "application/json",

              success: function(data) {

                that.$message('收藏成功');
              },
              error: function(data) {

                that.$message.error('收藏失败');
                that.classA= false
                console.log("false")
              }

            })
          }else{
            $.ajax({

              method:'POST',
              url: "http://www.wutongsd.com/awm/deleteByUserIdFa.do",
              async: true,
              data:{'gdId':gdId,'userId':userId},
              datatype: "json",
              withCredentials: true,
              contentType: "application/json",

              success: function(data) {
                that.$message('取消收藏');
              },
              error: function(data) {
                that.classA= true
                console.log("true")
              }

            })
          }
        }else{
          this.$message.error('请先登录');
        }


      },

      collection2:function(){
        if(sessionStorage.getItem('login')){
          this.classB= !this.classB
          var that = this
          var userId = sessionStorage.getItem("userId")
          var adExId = this.adexid
          if(this.classB){
            $.ajax({

              method:'POST',
              url: "http://www.wutongsd.com/awm/insertCollection.do",
              async: true,
              data:{'adExId':adExId,'userId':userId},
              datatype: "json",
              withCredentials: true,
              contentType: "application/json",

              success: function(data) {
                that.$message('收藏成功');
              },
              error: function(data) {

                that.$message.error('收藏失败');
                that.classB= false
                console.log("false")
              }

            })
          }else{
            $.ajax({

              method:'POST',
              url: "http://www.wutongsd.com/awm/deleteByUserIdCo.do",
              async: true,
              data:{'adExId':adExId,'userId':userId},
              datatype: "json",
              withCredentials: true,
              contentType: "application/json",

              success: function(data) {
                that.$alert('取消收藏', '', {
                  confirmButtonText: '确定',
                });
              },
              error: function(data) {
                that.classB= true
                console.log("true")
              }

            })
          }
        }else{
          this.$message.error('请先登录');
        }


      },

      follow:function(){
        this.followA=!this.followA
      },
      // Selected:function(value,index){
      //   var that = this

      // that.lbt.forEach(function (value) {

      //        that.$set(value,'ulA',false);
      //　　　　});
      //　　　 that.$set(value,'ulA',true);
      //     console.log(index)

      // },
      Switch:function(value,index){
        var that = this

        that.lbt.forEach(function (value) {

          that.$set(value,'ulA',false);
        });
        that.$set(value,'ulA',true);
        console.log(index)
        console.log(value.imgs)
        this.Bigimgs=value.imgs



      },
      add1:function(){
        this.gdNumber++
        if(this.gdNumber>this.gdNumbers){
          this.gdNumber = this.gdNumbers
          this.$message('不能大于库存');
        }
      },
      del1:function(){
        if(this.gdNumber>0){
          this.gdNumber--
        }


      }


    }
  }
</script>

<style scoped>
  .BigDetail{
    width: 420px;
    height: 450px;

  }
  .BigDetail .BigP{
    width: 400px;
    height: 350px;
    background-size:400px 350px;
  }
  .BigDetail .BigUl{
    width: 400px;
    height: 100px;


    display: -webkit-flex;
    display: flex;
    justify-content:space-around;

  }
  .BigUl li{
    width:50px;
    height:50px;
    margin-top:20px;
    background-size:50px 50px;


  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"]{
    -moz-appearance: textfield;
  }
  .delbut button{
    font-size:25px;
    color:#000;
  }
  .share{
    min-hieght:20px;
    padding-bottom:10px;
    font-size:15px;
  }
  .buttons{
    height:90px;
    width:450px;

    overflow: auto; zoom: 1;
  }
  .buttons .nowshop{
    color:#fff;
    background:#df3033;
    border:1px solid #df3033;


  }
  .buttons button{
    margin:30px 0px  0 32px;
    height:40px;
    width:100px;
    background:#fbe3e4;
    border:1px solid #df3033;
    float:left;
    color:#df3033;

  }
  .number{
    height:38px;
    line-height:38px;
    width:380px;
    overflow: auto; zoom: 1;
    margin-top:13px;
  }
  .number p{
    width:72px;
    margin-left:32px;
    float:left;

  }
  .number .number2{
    width:115px;

    float:left;
    height:30px;
    position:relative;


  }
  .number2 input{
    border:1px solid #c9c9c9;
    width:100px;
    position:absolute;
    height:29px;
    text-indent:5px;

  }
  .number2 .adddel{
    position:absolute;
    left:100px;
    width:15px;

    height:30px;
  }
  .adddel h4{
    height:14px;
    line-height:13px;
    border:1px solid #c6c6c6;
    text-align:center;
    font-weight:100;
    color:#5d5d5d;
    background:#d1d1d1;
  }
  .adddel h4:hover{
    cursor:pointer
  }
  .adddel h4:active{
    background:#5d5d5d;
    color:#fff;

  }
  .adddel h4:nth-child(1){

    border-bottom:0;

  }

  .colordiff{
    min-height:38px;
    line-height:38px;
    width:380px;
    overflow: auto; zoom: 1;
  }
  .colordiff p{
    width:72px;
    margin-left:32px;
    float:left;
  }
  .colordiff ul{
    width:370px;
    margin-left:-3px;
    float:left;
    overflow: auto; zoom: 1;
  }
  .colordiff ul li{
    min-width:46px;
    height:46px;
    float:left;

    margin:4px;

  }
  .ul-a1{
    border:1px solid #b00;
  }
  .ul-b1{
    border:1px solid #cacaca;
  }
  .colordiff ul li img{
    width:40px;
    height:40px;
    margin:3px;

  }
  .size{
    height:52px;
    line-height:30px;
    margin-left:32px;

  }
  .size span{
    display:inline-block;
    height:30px;
    width:60px;
    margin-left:47px;


  }
  .freight{
    height:35px;
    line-height:35px;
    width:380px;
    color:#595959;
    overflow: auto; zoom: 1;
    padding:5px 0;
  }
  .freight p{
    width:72px;
    margin-left:32px;
    float:left;
  }
  .freight span{

    margin-left:3px;
  }
  .MLRtop{
    min-height:20px;
    line-height:20px;
    font-size:15px;
    width:380px;
    padding:0 115px 0 33px;
    max-height:60px;
    overflow:hidden;
    color:#595959;
  }
  .MLRmid{
    height:63px;
    width:510px;

    margin-left:20px;
    margin-top:10px;
  }
  .MLRmid div{
    margin-left:12px;
    line-height:63px;
    width:485px;


  }
  .MLRmid div span{
    color:#e33d3f;
    margin-left:50px;
    font-size:20px;

  }
  .MLRmid p:nth-child(1){
    height:30px;
    width:485px;
    line-height:24px;
    border-bottom:1px dashed #cacaca;
    margin-left:12px;
    color:#595959;

  }
  .MLRmid p:nth-child(1) span{
    line-height:24px;
    color:#e33d3f;
    margin-left:20px;
    font-size:15px;
  }
  .MLRmid p:nth-child(2){
    color:#595959;
    line-height:38px;

    margin-left:12px;
    font-size:12px;
  }
  .MLRmid p:nth-child(2) span{
    color:#e33d3f;
    margin-right:40px;

    margin-left:15px;
    font-size:12px;
  }

  .commonTop{
    height:100px;
    width:640px;
    padding:20px 245px  25px 42px;

    text-align:left;
    font-size:12px;
  }
  .commonTop p{
    height:45px;
    width:640px;

  }
  .commonTop p button{
    height:18px;
    line-height:18px;
    width:48px;
    border:1px solid #cacaca;
    margin-left:13px;
    color:#727272;
    text-indent:11px;

  }
  .commonTop p .follow1{

    background:url(../assets/xin2.png) no-repeat 4px 4px #eee;
  }
  .commonTop p .follow2{

    background:url(../assets/xin.png) no-repeat 4px 4px #eee;
  }
  .commonTop span{
    display:inline-block;
    min-width:30px;
    padding-right:60px;
    height:43px;

  }
  .commonBot{
    width:1025px;
    margin-bottom:40px;
  }
  .commonBot img{
    width:1025px;
  }
  .shopbottom{
    min-height:190px;
    width:190px;
    margin-bottom:40px;
  }
  .shopbottom h4{
    height: 10px;
    border-bottom: 1px #d2d2d2 solid;
    text-align:center;
    margin-bottom:10px;
    margin:0 auto;
    width:96%;


  }
  .shopbottom h4 span{
    position: relative;
    display:inline-block;
    width:100px;
    background:#f9f9f9;


  }
  .shopbottom ul{
    min-height:18px;

    width:190px;
    margin-top:16px;
    padding-top:20px;
  }

  .shopbottom ul .Sales span{
    float:right;
  }
  .shopbottom ul li{
    height:140px;

    width:160px;


  }
  .shopbottom ul li div p{
    height:30px;
    width:158px;
    line-height:30px;
    overflow:hidden;
    position:absolute;
    bottom:0;
    color:#666666;
    text-align:left;

  }
  .shopbottom ul li div .hots1{
    z-index:9;
    font-size:10px;
    margin-left:5px;

  }
  .shopbottom ul li div .hots2{
    width:160px;
    background:#fff;

    Opacity:0.8;
    z-index:1

  }
  .shopbottom ul li div{
    height:120px;
    width:160px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position:relative;
    padding-left:13px;
  }
  .shopbottom ul li div img{
    height:120px;
    width:160px;

  }

  .shoptop{
    min-height:105px;
    width:165px;
    border:1px solid #cacaca;
    margin-bottom:25px;
    margin-left:10px

  }
  .shoptop h4{
    height:30px;
    width:165px;
    border-bottom:1px solid #cacaca;
    line-height:30px;
    font-size:12px;
  }
  .shoptop .imgO{
    height:104px;
    width:165px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .shoptop img{
    max-width:165px;

  }
  .shoptop .buttonO{
    min-height:34px;
    width:150px;
    border-top:1px solid #cacaca;
    font-size:12px;
    padding-top:5px;
    margin-left:5px;
    padding-bottom:19px;

  }
  .buttonO p{
    min-height:30px;
    line-height:30px;
    text-align: left;
    margin-left:5px;
  }
  .shoptop .buttonO button{
    height:22px;
    width:65px;
    border:1px solid #cacaca;
    font-size:8px;
    background:#fff;
    text-indent:12px;
  }
  .buttonO button a{
    color:#424542;
  }
  .shoptop .buttonO button:nth-child(1){

    background:url(../assets/Collection3.png) no-repeat 2px 5px #fff;
    margin-right:12px

  }
  .shoptop .buttonO .classS1{

    background:url(../assets/xin.png) no-repeat 2px 5px #fff;

  }
  .shoptop .buttonO .classS2{

    background:url(../assets/xin2.png) no-repeat 2px 5px #fff;

  }
  .Collection{
    height:20px;
    width:200px;
    line-height:20px;
    text-align:left;
    font-size:14px;
    position:relative;
  }
  .Collection .share{
    display:none;
    position:absolute;
    height:60px;
    width:150px;
    left:80px;
    top:20px;

    background:red;
  }
  .Collection .classspan{
    height:20px;
    width:80px;
    display:inline-block;
    text-indent:15px;

  }
  .Collection .class-a{
    background:url(../assets/Collection.png) no-repeat 0px 3px;
  }
  .Collection .class-b{
    background:url(../assets/Collection2.png) no-repeat 0px 3px;
  }
  .Collection .class-a2{
    height:30px;
    width:80px;
    color:#5d5d5d;
    text-indent:15px;
    border:0;
    background:url(../assets/share.png) no-repeat 15px 12px;
  }

  .content{
    width:100%;
    overflow: auto; zoom: 1;
    padding-top:40px;
    background: #f9f9f9;
    margin:0 auto;
  }

  .contentL{
    width:190px;
    float:left;
    margin-left:10px;

  }
  .contentR{
    width:1015px;
    float:left;
    margin-left:10px;
  }
  .contentR ul{
    overflow: auto; zoom: 1;
  }
  .contentR li{
    float:left;
    height:31px;
    width:110px;
    line-height:31px;
  }
  .container{
    box-sizing:border-box;
    padding-top:10px;
    border-top:1px solid #b00;
  }

  .action{
    color:#fff;
    background:#b00;
  }
  .con1{
    display:block
  }
  .con2{
    display:none
  }
  .swiper-container2 {
    width: 125px;
    height: 370px;
    overflow: hidden;
    margin:0 auto;


  }

  .swiper-container2 .swiper-slide {
    height:100px !import;
    width:100% !import;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
  }
  .swiper-container2 .swiper-button-prev{
    position:absolute;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    top:430px;
    left:30px;
    background-size:25px 25px;

  }
  .swiper-container2 .swiper-button-next{
    position:absolute;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    top:430px;
    left:110px;
    background-size:25px 25px;

  }
  .gallery-top{
    height:350px;
    width:420px;
    margin-bottom:25px;
  }
  .gallery-thumbs{
    height:65px;
    box-sizing:border-box;
    width:420px;
    cursor: pointer;
  }
  .gallery-thumbs .swiper-slide{
    width:60px;
    height:60px;

  }

  .MiddleL .swiper-slide{
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
  }

  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  /*.el-col {
    border-radius: 4px;

  }*/



  .grid-content {
    border:1px solid #b5b5b5;
    padding:12px;
    height: 290px;
    width:260px;
    margin-bottom:16px;
  }



  .headers{
    height:165px;
    width:100%;
    background:#f9f9f9;
    overflow: auto; zoom: 1;
  }
  .headerLeft{

    float: left;
    height: 160px;
    /* line-height: 160px; */
    min-width: 375px;
    overflow: hidden;

  }
  .headerLeft span{


    font-size: 30px;
    height: 160px;
    line-height: 160px;
    margin-left: 50px;
    display: inline-block;
    max-width: 300px;
    overflow: hidden;

  }
  .headerLeft a{
    display: inline-block;
    height: 160px;
    line-height: 160px;
    width: 200px;
    overflow: hidden;
  }
  .headerLeft img{
    max-width:200px;
    max-height:160px;
    overflow:auto;

  }
  .headerRight{
    float:left;
    height:160px;
    width:660px;

  }
  .headerRight div{
    margin-top:64px;
    margin-left:160px;
    height:32px;
    width:490px;
    overflow: auto; zoom: 1;
    border:1px solid #ff8328;
    background:#eaeaea;
  }
  .headerRight div input{
    height:32px;
    width:90%;
    border:none;
    background:#fff;
    text-indent:15px;
    float:left;
  }
  .headerRight div button{
    float:left;
    height:32px;
    width:10%;
    background:url(../assets/seach.png) no-repeat 14px 5px #ff8328;
    border:none;
    font-size:15px;
    color:#fff;
  }
  .Middle{
    min-height:470px;
    width:100%;
    padding-top:40px;
    margin:0 auto;
    overflow: auto; zoom: 1;
    background:#f9f9f9;
  }
  .MiddleL{
    height:470px;
    width:1005px;
    float:left;
    overflow: auto; zoom: 1;
    margin-left:18px;
  }
  .MiddleLL{
    height:470px;
    width:420px;
    float:left;

  }
  .MiddleLR{
    height:450px;
    width:380px;
    float:left;
    text-align:left;

  }
  .MiddleR{
    height:470px;
    width:205px;
    overflow:hidden;
    float:left;

  }

  .shoptop p span {
    display: block;
    font-size: 13px;
    color: #212121;
    position: relative;
    margin-bottom:18px;


  }
  .shoptop p span:before,.shoptop p span:after {
    content: '';
    position: absolute;
    top: 40%;
    background: #494949;
    width: 20%;
    height: 1px;
  }
  .shoptop p span:before{
    left: 10%;
  }
  .shoptop p span:after {
    right: 10%;
  }
  .HOMEnav{
    height:40px;
    width:100%;
    text-align:left;
    background:#1b1b1b
  }
  .HOMEnav span{
    height:40px;
    line-height:40px;
    color:#fff;
    display:inline-block;
    width:185px;
    text-align:right;
    font-size:20px;
  }
  .logoImg{
    width:100%;
    height:120px;
    background:url(../assets/logobig.png) no-repeat 46px 35px #fff;
    overflow: hidden;
  }
  .logoImg .lOgin_search{
    width:490px;
    height:38px;
    margin:40px 0 0 282px;
  }
  .logoImg .lOgin_search input{
    width:408px;
    height:36px;
    background: #eaeaea;
    float:left;
    border:1px solid #ff8328;

  }
  .logoImg .lOgin_search span{
    width:80px;
    height:38px;
    line-height: 38px;
    background:#ff8328;
    float:left;
    color:#eff4fa;
  }
  .logoImg .lOgin_search span:hover{
    cursor: pointer;
  }
</style>
